<template>
  <div className="px-[2vw]">
    <div className="flex justify-between items-center">
      <v-icon :icon="mdiChevronLeft" size="50" @click="router.back()" />
      <span>新朋友</span>
      <span @click="router.push('/find')">添加</span>
    </div>
    <v-divider class="border-opacity-100" />

    <v-list v-model:opened="msgCurList">
      <v-list-group :value="index" v-for="(i, index) in msgList" :key="index">
        <template v-slot:activator="{ props }">
          <v-list-item v-bind="props">
            <template v-slot:append
              ><v-btn
                @click.stop="toAgree(i[0].uid)"
                :disabled="i[0].status === 2"
              >
                {{ i[0].status === 2 ? "已同意" : "同意" }}
              </v-btn></template
            >
            <div className="w-full h-[8vh] flex justify-between">
              <div className="basis-1/5 flex items-center">
                <v-avatar :image="userInfo.getHeader(i[0].avatar)" size="40"></v-avatar>
              </div>
              <div className="basis-4/5">
                <div>
                  <span>{{ i[0].username }}</span>
                </div>
                <div>
                  <span className="text-sm">{{ i[0].msg }}</span>
                </div>
                <div>
                  <span className="text-xs">{{ i[0].createTime }}</span>
                </div>
              </div>
            </div>
          </v-list-item>
        </template>
        <v-list-item v-for="j in i" :key="j.id">
          <div className="w-full h-[8vh] flex justify-between">
            <div className="basis-1/5 flex items-center">
              <v-avatar :image="j.avatar" size="40"></v-avatar>
            </div>
            <div className="basis-4/5">
              <div>
                <span className="text-sm">{{ j.msg }}</span>
              </div>
              <div>
                <span className="text-xs">{{ j.createTime }}</span>
              </div>
            </div>
          </div>
        </v-list-item>
      </v-list-group>
    </v-list>
  </div>
</template>

<script lang="ts" setup>
import { agreeApply, getAddMsg } from "@/api";
import { useUserInfoStore } from "@/store/userInfo";
import { mdiChevronLeft } from "@mdi/js";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const userInfo = useUserInfoStore();
const msgList = ref();
const msgCurList = ref([]);

const toAgree = (fid: number) => {
  agreeApply(userInfo.user.id, fid).then(() => {
    // 刷新
    getAddMsg(userInfo.user.id).then((res) => {
      msgList.value = res;
    });
  });
};

onMounted(() => {
  // 查找添加信息
  getAddMsg(userInfo.user.id).then((res) => {
    msgList.value = res;
  });
});
</script>
